<template>
  <div class="ant-card" style="margin:0;padding:10px">
    <!-- <a-form layout="inline" :form="logindata">
      <a-form-item label="地址:">
        <a-input v-model="logindata.address"></a-input>
      </a-form-item>
      <button id="login" style="width: 80px; margin-left: -6px;" @click="login">登录</button>
    </a-form>-->
    <div class="userInfo" style="min-width: 1192px;">
      <div class="components-input-demo-size">
        <span>地址:</span>
        <a-input v-model="logindata.ip"></a-input>
        <!-- <input id="ip" name="ip" v-model="logindata.ip" /> -->
        <span>端口:</span>
        <a-input v-model="logindata.port"></a-input>
        <!-- <input id="port" name="port" v-model="logindata.port" /> -->
        <span>用户名:</span>
        <a-input v-model="logindata.userName"></a-input>
        <!-- <input id="userName" name="userName" v-model="logindata.userName" /> -->
        <span>密码:</span>
        <a-input v-model="logindata.pwd"></a-input>
        <a-button type="primary" @click="login">{{logindata.status?"退出":"登入"}}</a-button>
      </div>

      <!-- <input id="pwd" name="pwd" v-model="logindata.pwd" /> -->
      <!-- <button id="login" style="width: 80px; margin-left: -6px;" @click="login">登录</button> -->
    </div>
    <div class="serviceInfo" style="min-width: 1790px;">
      <div class="service">
        <a-row>
          <a-col :span="5">
            <div style>设备列表</div>
            <div class="treeManage" style="margin-top: 20px;">
              <div id="resourceTree" ref="resourceTree" class="resourceTree filetree">
                <a-tree
                  showLine
                  :treeData="list"
                  :expandedKeys="expandedKeys"
                  :selectedKeys="selectedKeys"
                  :style="{'height':'500px','border-right':'2px solid #c1c1c1','overflow-y':'auto'}"
                  @expand="onExpand"
                  @select="this.onSelect"
                ></a-tree>
              </div>
              <!-- <div id="resourceTreeFrond" ref="resourceTreeFrond" class="resourceTreeFrond filetree"></div> -->
            </div>
          </a-col>
          <a-col :span="19">
            <div class="preview" style="display: block; margin-top: 13px;margin-left:20px">
              <div class="video_window">
                <div class="video_window_items">
                  <div class="video_window_item">
                    <div
                      class="video videoWnd_selected"
                      id="video11"
                      ref="video11"
                      style="width:300px;height:270px;"
                    ></div>
                  </div>
                  <div class="video_window_item">
                    <div class="video" id="video12" ref="video12"></div>
                  </div>
                  <div class="video_window_item">
                    <div class="video" id="video13" ref="video13"></div>
                  </div>
                  <div class="video_window_item">
                    <div class="video" id="video14" ref="video14"></div>
                  </div>
                </div>
                <div class="video_window_items">
                  <div class="video_window_item">
                    <div class="video" id="video21" ref="video21"></div>
                  </div>
                  <div class="video_window_item">
                    <div class="video" id="video22" ref="video22"></div>
                  </div>
                  <div class="video_window_item">
                    <div class="video" id="video23" ref="video23"></div>
                  </div>
                  <div class="video_window_item">
                    <div class="video" id="video24" ref="video24"></div>
                  </div>
                </div>
                <div class="video_window_items">
                  <div class="video_window_item">
                    <div class="video" id="video31" ref="video31"></div>
                  </div>
                  <div class="video_window_item">
                    <div class="video" id="video32" ref="video32"></div>
                  </div>
                  <div class="video_window_item">
                    <div class="video" id="video33" ref="video33"></div>
                  </div>
                  <div class="video_window_item">
                    <div class="video" id="video34" ref="video34"></div>
                  </div>
                </div>
                <!-- <div>定位信息</div>
                <textarea class="location_info" id="location_info" readonly="readonly"></textarea>-->
              </div>

              <div class="play_param" style="width: 260px;float: right;margin-top: -825px;">
                <div class="play_tool">
                  <div class="play_tool_item" style>
                    <input
                      class="closeView"
                      type="button"
                      value="关闭"
                      onclick="WebPreview.StopVideo()"
                    />
                    <input
                      class="audio"
                      type="button"
                      value="音频"
                      onclick="WebPreview.ClickAudioRes()"
                    />
                    <input
                      class="talk"
                      type="button"
                      value="对讲"
                      onclick="WebPreview.ClickTalkbackRes()"
                    />
                    <input
                      class="location"
                      type="button"
                      value="定位"
                      onclick="WebPreview.ClickLocationRes()"
                    />
                    <input
                      class="snapShot"
                      type="button"
                      value="本地抓拍"
                      onclick="WebPreview.LocalSnapshot()"
                    />
                  </div>
                  <div class="play_tool_item">
                    <input
                      class="top"
                      type="button"
                      value="向上"
                      onmousedown="WebPreview.StartTurePtz(WebPreview.PtzTureType.PTZ_TURN_UP)"
                      onmouseup="WebPreview.StopTurePtz()"
                    />
                    <input
                      class="bottom"
                      type="button"
                      value="向下"
                      onmousedown="WebPreview.StartTurePtz(WebPreview.PtzTureType.PTZ_TURN_DOWN)"
                      onmouseup="WebPreview.StopTurePtz()"
                    />
                    <input
                      class="left"
                      type="button"
                      value="向左"
                      onmousedown="WebPreview.StartTurePtz(WebPreview.PtzTureType.PTZ_TURN_LEFT)"
                      onmouseup="WebPreview.StopTurePtz()"
                    />
                    <input
                      class="right"
                      type="button"
                      value="向右"
                      onmousedown="WebPreview.StartTurePtz(WebPreview.PtzTureType.PTZ_TURN_RIGHT)"
                      onmouseup="WebPreview.StopTurePtz()"
                    />
                    <input
                      class="record"
                      type="button"
                      value="本地录像"
                      onclick="WebPreview.LocalRecord()"
                    />
                  </div>
                </div>

                <div style="margin-bottom: 2%; margin-left: 10px;">
                  <input
                    class="callUserTalk"
                    type="button"
                    value="语音通话"
                    onclick="WebPreview.CallUserTalk()"
                    style="width: 95px;"
                  />
                </div>

                <div style="margin-bottom: 2%; margin-left: 10px;">
                  <input
                    class="platformStorage"
                    type="button"
                    value="手动开启平台录像"
                    onclick="WebPreview.ManualStartOrStopStorage()"
                  />
                </div>

                <div class="paramSet">
                  <div>系统参数设置</div>
                  <div style="border:1px solid grey; height: 100px; width: 200px;">
                    <p class="definition">
                      <span style="margin-left:5px;">清晰度:</span>
                      <input
                        type="number"
                        id="def"
                        min="1"
                        max="100"
                        name="def"
                        onkeyup="WebPreview.limitInput(this);"
                        style="margin-left:3px; padding: 3px;margin-right:5px;width:68px;"
                      />
                      <input
                        class="definition"
                        type="button"
                        value="提交"
                        onclick="WebPreview.SetDefinition()"
                      />
                    </p>

                    <p class="volume">
                      <span style="margin-left:20px;">音量:</span>
                      <input
                        type="number"
                        id="vol"
                        min="1"
                        max="100"
                        name="vol"
                        onkeyup="WebPreview.limitInput(this);"
                        style="margin-left:3px; padding: 3px;margin-right:5px;width:70px;"
                      />
                      <input
                        class="volume"
                        type="submit"
                        value="提交"
                        onclick="WebPreview.SetAudVolume()"
                      />
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </a-col>
        </a-row>
      </div>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import { WebClient } from './WebClient'
import { WebTree } from './tree'
export default {
  name: 'ImgTurnPage',
  components: {
    draggable
  },

  data() {
    return {
      description: '图片翻页',
      logindata: {
        userName: 'sdk测试',
        ip: '119.3.79.135',
        port: '7178',
        pwd: 'admin8888',
        status: false
      },
      list: [],
      selectedKeys: [],
      expandedKeys: [],
      hServer: ''
      //数据集
    }
  },
  mounted() {
    WebClient.Load(this)
  },
  methods: {
    login() {
      var _this = this
      if (this.logindata.status) {
        WebClient.Logout(this.logindata, function(res) {
          if (res.code == 'delete') {
            _this.logindata.status = !_this.logindata.status
            _this.list = []
            if (res.arr.length > 0) {
              for (var i in res.arr) {
                console.log(res.arr[i])
                document.getElementById(res.arr[i]).innerHTML = ''
              }
            }
          }
        })
      } else {
        //登入
        WebClient.Login(this.logindata, res => {
          console.log('list:')
          console.log(res)

          var data = res.devs
          var list = []
          for (var i in data) {
            list.push({
              title: `${data[i].title}(${res.online}/${res.deviceListSum})`,
              key: `0-${i}`,
              children: this.listmap(data[i], `0-${i}`)
            })
            //  list.push({
            //    title: `${data[i].title}(${res.online}/${res.deviceListSum})`,
            //    key: `0-${i}`,

            // })

            // if(data[i].children.length>0){

            //   var arr=[]
            //   for(var j in data[i].children){

            //     arr.push({
            //       title:data[i].children[j].title,
            //       key:`${list[i].key}-${j}`
            //     })

            //   }

            //   list[i].children=arr
            //   for(var j in data[i].children){
            //      if(data[i].children[j].children.length>0){
            //       var arr1=[]
            //       for(var z in data[i].children[j].children){
            //         arr1.push({
            //            title:data[i].children[j].children[z].title,
            //             key:`${list[i].children[j].key}-${z}`
            //         })

            //       }
            //        list[i].children[j].children=arr1
            //     }
            //   }
            // }
          }

          this.list = list
          this.logindata.status = !this.logindata.status
          console.log(this.list)
        })
      }
    },
    listmap(list, index) {
      console.log('++++++++')
      console.log(list.children)
      var childrens = list.children
      var arr = []
      if (childrens.length > 0) {
        for (var i in childrens) {
          var data = {
            title: childrens[i].title,
            key: index + '-' + i,
            children: childrens[i].children
          }
          if (childrens[i].children.length == 0) {
            data = Object.assign(data, {
              hServer: childrens[i].hServer
            })
          }
          arr.push(data)
          if (childrens[i].children.length > 0) {
            this.listmap(data, data.key)
          }
        }
      }

      return arr
    },

    onSelect(selectedKeys, info) {
      // for (var i = 0; i < this.imgList.length; i++) {
      //   if (this.imgList[i].key === selectedKeys[0]) {
      //     this.sort = this.imgList[i].sort
      //     this.setValue(this.imgList[i])
      //     break
      //   }
      // }
      // if(info)
      console.log(info)
      console.log(info.selectedNodes[0].key)
      if (info.selectedNodes[0].key) {
      } else {
        WebTree.dblClickEvent(info.selectedNodes[0].data.props.hServer)
      }
      console.log(selectedKeys)
    },
    onExpand(expandedKeys) {
      this.expandedKeys = expandedKeys
    }
  }
}
</script>


<style scoped>
.components-input-demo-size .ant-input {
  width: 150px;
  margin: 0 8px 8px 0;
}
a,
span {
  outline: none;
}
p,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
li,
dl,
dt,
dd,
form {
  margin: 0;
  padding: 0;
  list-style: none;
}

html,
body {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
#dragVideo {
  cursor: default;
  font-size: 12px;
  position: absolute;
  width: 590px;
  height: 555px;
  border: 2px solid #364e6f;
}

div.dragVideo_header div {
  position: absolute;
  right: 5px;
  top: 2px;
}

div.dragVideo_header div a {
  float: left;
  margin-left: 5px;
  cursor: default;
  display: inline-block;
  width: 16px;
  height: 16px;
}

div.dragVideo_bottom div.bottom_butt a.butt_frond {
  cursor: default;
  display: inline-block;
  width: 32px;
  height: 32px;
}

div.dragVideo_bottom div.bottom_butt a.butt_later {
  cursor: default;
  display: inline-block;
  width: 16px;
  height: 16px;
}

div.dragVideo_bottom div.bottom_butt a.butt_volume {
  cursor: default;
  display: inline-block;
  width: 100px;
  height: 4px;
}
</style>